<template>
  <a-page-header title="表单" :ghost="false" style="margin: -10px">
    <div>高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。</div>
  </a-page-header>

  <div class="page-wrapper">
    <a-card title="基础表单">
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item ref="name" label="Activity name" name="name">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="Activity zone" name="region">
          <a-select v-model:value="formState.region" placeholder="please select your zone">
            <a-select-option value="shanghai">Zone one</a-select-option>
            <a-select-option value="beijing">Zone two</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="Activity time" required name="date1">
          <a-date-picker
            v-model:value="formState.date1"
            show-time
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item label="Instant delivery" name="delivery">
          <a-switch v-model:checked="formState.delivery" />
        </a-form-item>
        <a-form-item label="Activity type" name="type">
          <a-checkbox-group v-model:value="formState.type">
            <a-checkbox value="1" name="type">Online</a-checkbox>
            <a-checkbox value="2" name="type">Promotion</a-checkbox>
            <a-checkbox value="3" name="type">Offline</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="Resources" name="resource">
          <a-radio-group v-model:value="formState.resource">
            <a-radio value="1">Sponsor</a-radio>
            <a-radio value="2">Venue</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="Activity form" name="desc">
          <a-textarea v-model:value="formState.desc" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">Create</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
  import type { Rule } from 'ant-design-vue/es/form'
  import { Dayjs } from 'dayjs'
  import type { UnwrapRef } from 'vue'
  import { reactive, ref, toRaw } from 'vue'

  interface FormState {
    name: string
    region: string | undefined
    date1: Dayjs | undefined
    delivery: boolean
    type: string[]
    resource: string
    desc: string
  }
  const formRef = ref()
  const labelCol = { span: 5 }
  const wrapperCol = { span: 13 }
  const formState: UnwrapRef<FormState> = reactive({
    name: '',
    region: undefined,
    date1: undefined,
    delivery: false,
    type: [],
    resource: '',
    desc: ''
  })
  const rules: Record<string, Rule[]> = {
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'change' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
    ],
    region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
    date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],
    type: [
      {
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change'
      }
    ],
    resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
    desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
  }
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState))
      })
      .catch((error) => {
        console.log('error', error)
      })
  }
  const resetForm = () => {
    formRef.value.resetFields()
  }
</script>
<style scoped>
  .page-wrapper {
    padding: 20px 0;
  }
</style>
